<script setup>
import { getCategoryHead, getCategoryTwo } from '@/api/kind'
import { onMounted, ref, watch } from 'vue';
import {useRouter} from 'vue-router'

//创建路由
const router = useRouter()


//存储分类数据
const CategoryHead = ref([])
//存储分类导航下标
const active = ref(0)

//存储顶部分类数据
const CategoryTwo = ref([])
const CategorySix = ref([])
//存储顶部导航下标
const tabsActive = ref(0)

//存储内容数据
const CategoryThree = ref([])

//侧边导航分类请求函数
async function fn1(){
    const res1 = await getCategoryHead()
    CategoryHead.value = res1.data.result
    // console.log(CategoryHead.value);
}

//顶部接口请求函数
async function fn2(){
    const res2 = await getCategoryTwo({
        id:1005000
    })
    CategoryTwo.value = res2.data.result.children
    // CategorySix.value = CategoryTwo.value[tabsActive.value]
    // CategoryThree.value = res2.data.result.children.goods
    // console.log(CategorySix.value);


    CategoryThree.value = CategoryTwo.value[tabsActive.value].goods


    // console.log(CategoryThree.value);

}

//内容接口请求函数
// async function fn3(){
//     const res3 = await getCategoryTwo({
//         id:1005000
//     })
// }

onMounted(async () => {
    await fn1()

    await fn2()
    
    // await fn3()
})

//侦听分类的切换
watch(active,async () => {
    // console.log(active.value);
    tabsActive.value = 0
    await fn1()
    // await fn2()
    const res2 = await getCategoryTwo({
        id: CategoryHead.value[active.value].id
    })
    CategoryTwo.value = res2.data.result.children
    CategoryThree.value = CategoryTwo.value[tabsActive.value].goods
    // await fn3()
})

//侦听内容的切换
watch(tabsActive,async () => {
    // console.log(tabsActive.value);
    // await fn2()
    const res2 = await getCategoryTwo({
        id: CategoryHead.value[active.value].id
    })
    CategoryTwo.value = res2.data.result.children
    CategoryThree.value = CategoryTwo.value[tabsActive.value].goods
})

//点击跳转商品详情
function toGrid(id){
    // console.log(id);
    router.push({
        path:'/detail',
        query:{
            id
        }
    })
}
</script>

<template>
    <div class="box">
        <header class="header">分类</header>

        
        <div class="content">

            <!-- //侧边导航条 -->
            <van-sidebar v-model="active">
                <van-sidebar-item
                    v-for="item in CategoryHead" 
                    :key="item.id"
                    :title="item.name" 
                />
            </van-sidebar>

             <!-- //顶部分类条 -->
        <van-tabs v-model:active="tabsActive">
            <van-tab
                v-for="item in CategoryTwo" 
                :key="item.id"
                :title="item.name"
            >
            
            <!-- //内容 -->
            <van-grid
                :gutter="6" 
                :column-num="2" 
                icon-size="100px"
            >
                <van-grid-item
                    v-for="value in CategoryThree" 
                    :key="value.id" 
                    :icon="value.picture" 
                    :text="value.name" 
                    @click="toGrid(value.id)"     
                />
            </van-grid>

            </van-tab>
        </van-tabs>
        </div>

       
    </div>
</template>


<style lang="scss" scoped>
.content{
    display: flex;
    
    .van-tabs{
        flex: 1;
    }
}
</style>